<template>
  <div class="content">
    <div>
      <van-nav-bar class="nav-bar-style" left-arrow @click-left="onClickLeft">
        <template #title>
          <div class="nav-bar-title-style">出库物料</div>
        </template>
        <template #left>
          <van-icon size="30" name="arrow-left" color="#FFF" />
        </template>
      </van-nav-bar>
    </div>

    <!-- 表单 -->
    <div>
      <ul>
        <li class="contLi">
          <div class="left">
            <div style="padding: 8px;">
              <div class="leftLi">
                <span class="title">批号</span>
                <span class="desc">{{this.row.batchCode }}</span>
              </div>
              <div class="leftLi">
                <span class="title">入库时间</span>
                <span
                  class="desc"
                >{{$moment(this.row.productionDate).format('YYYY-MM-DD HH:mm:ss')}}</span>
              </div>
              <div class="leftLi">
                <span class="title">生产日期</span>
                <span
                  class="desc"
                >{{$moment(this.row.validUntil).format('YYYY-MM-DD HH:mm:ss')}}</span>
              </div>
              <div class="leftLi">
                <span class="title">有效期至</span>
                <span
                  class="desc"
                >{{$moment(this.row.expirationDate).format('YYYY-MM-DD HH:mm:ss') }}</span>
              </div>
              <div class="leftLi">
                <span class="title">剩余数量</span>
                <span class="desc">{{this.row.name}}</span>
              </div>
              <div class="leftLi">
                <span class="title">储存位置</span>
                <span class="desc">{{this.row.locations }}</span>
              </div>
              <div class="leftLi">
                <span class="title">备注</span>
                <span class="desc">{{this.row.vendorName }}</span>
              </div>
            </div>

            <!-- <div class="slot"></div>
            <div style="padding: 8px;">
              <div class="leftLi">
                <span class="title">待出库数量</span>
                <span class="desc">{{this.row.toScanNum}}</span>
              </div>
              <div class="scanCountLi">
                <span class="title">扫码数量</span>
                <span class="toInStorageCountStyle">{{ this.row.scanedNum }}</span>
                <img
                  src="@/assets/ic_more.png"
                  width="26px"
                  height="26px"
                  class="scanCountMoreStyle"
                  @click="onClickMore"
                />
              </div> -->

              <!-- <van-button @click="scanOutStorageDetail2">测试扫码</van-button> -->
            <!-- </div> -->
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import http from "@/utils/request.js";
import api from "@/utils/api";
import router from "@/router";
import { Dialog } from "vant";
export default {
  data() {
    return {
      row: {},
      param: {},
      outStorageNo: ""
    };
  },
  // watch:{
  //   '$route'(to,from){
  //     console.log(to)
  //     this.
  //   }
  // },
  created() {
    window.scanOutStorageDetail2 = this.scanOutStorageDetail2;
    this.row = this.$route.query.row;
    // this.param = this.$route.query.param;
    this.outStorageNo = this.$route.query.outStorageNo;
    // this.init();
  },
  scanOutStorageWuliao(scanedBarCode) {
    this.scanedBarCode = scanedBarCode;
    var param = {
      barCode: scanedBarCode,
      // barCode: "3789275581133094915",
      outStorageNo: this.outStorageNo
    };
    http.fetchPost(api.outStorageValidateBarCode, param, "正在扫码,请稍后...").then(response => {
        if (response.code === 1) {
          this.row = response.data;
        }
    }).catch(err => {
        Dialog.confirm({
          title: "友情提示",
          confirmButtonText: "重新扫码",
          confirmButtonColor: "#2e71ff",
          message: "该条码不在入库单中，请重新扫码",
          width: 400
        })
    });
  },
  methods: {
    // init(){
    //   var param = this.param;
    //   http.fetchPost(api.outStorageValidateBarCode, param, "正在扫码,请稍后...")
    //     .then(response => {
    //         if(response.code === 1){
    //           this.row = response.data
    //         }
    //     })
    //     .catch(err => {
    //       console.log(" catch err  is  " + err);
    //   });
    // },
    onClickLeft() {
      router.push({ 
        path: "outStorageDetail" ,
        query:{
          id: this.$route.query.id
        }
      });
    },
    created() {
      this.row = this.$route.query.row;
      // this.param = this.$route.query.param;
      this.outStorageNo = this.$route.query.outStorageNo;
      // this.init();
    },
    scanOutStorageDetail2(scanedBarCode) {
        this.scanedBarCode = scanedBarCode
        var param={
          barCode: scanedBarCode,
          // barCode: "3797723683208822786",
          outStorageNo: this.outStorageNo
        };
        http.fetchPost(api.outStorageValidateBarCode, param, "正在扫码,请稍后...").then(response => {
            if (response.code === 1) {
              this.row = response.data
            }
        }).catch(err => {
            console.log(" catch err  is  " + err);
            Dialog.alert({
              title: "友情提示",
              message: err
            });
        });
    },
    onClickMore() {
      this.$router.push({
        path: "/OutCodeDetail",
        query: {
          outStorageNo: this.outStorageNo,
          materialId: this.row.materialId,
          row: this.row
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.nav-bar-style {
  background: #2e71ff;
  color: #fff;
}
.nav-bar-title-style {
  font-size: 22px;
  text-align: center;
  font-family: PingFangSC-Regular;
  color: #fff;
  margin-right: 62px;
}
.slot {
  width: 100%;
  height: 15px;
  background-color: #f6f6f6;
}
// 表单
.contLi {
  /* padding: 8px; */
  box-sizing: border-box;
  display: flex;
  font-size: 20px;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  margin-top: 10px;
}
.left {
  width: 100%;
  text-align: left;
}
.leftLi {
  display: flex;
  line-height: 37px;
}
.title {
  min-width: 33%;
  color: #999999;
}
.desc {
  margin-left: 20px;
  width: 100%;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333333;
}
.toInStorageCountStyle {
  font-size: 22px;
  text-decoration: blink underline;
  margin-left: 20px;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scanCountLi {
  display: flex;
  flex-direction: row;
  line-height: 37px;
  align-items: flex-start;
  justify-items: flex-start;
  justify-content: flex-start;
}
.scanCountMoreStyle {
  margin-left: 20px;
  margin-top: 6px;
}
</style>
